<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>采集业务系统</title>
    <!-- 引入jquery -->
    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
    <!-- 引入layui -->
    <link href="../../node_modules/layui/dist/css/layui.css" rel="stylesheet">
    <script src="../../node_modules/layui/dist/layui.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .container-top {
            background: white;
            border-radius: 8px;
            padding: 20px;
        }

        .progress-section {
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .circle-progress {
            width: 150px;
            height: 150px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .circle-progress svg {
            position: absolute;
        }

        .circle-progress circle:last-child {
            transform: rotate(-90deg);
            transform-origin: center;
            transition: stroke-dashoffset 0.3s ease;
        }

        .circle-progress .number {
            font-size: 36px;
            font-weight: bold;
        }

        .circle-progress .label {
            font-size: 12px;
            color: #666;
            text-align: center;
            position: absolute;
            bottom: 20px;
            width: 100%;
        }

        .info-section {
            flex: 1;
        }

        .title {
            font-size: 24px;
            margin: 0 0 5px 0;
        }

        .subtitle {
            color: #666;
            margin: 0 0 15px 0;
        }

        .stats {
            color: #666;
            font-size: 14px;
            display: flex;
            gap: 20px;
        }

        .stat-item {
            display: inline-block;
        }

        .button-group {
            margin-top: 20px;
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
        }


        .btn-secondary {
            background-color: #f8f9fa;
            border: 1px solid #dadce0;
        }

        /* 添加进度圈动画相关样式 */
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .circle-progress svg.rotating {
            animation: rotate 2s linear infinite;
        }

        .container-bottom {
            background-color: rgb(250, 250, 250);
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .container-bottom .layui-tab {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .container-bottom .layui-tab-content {
            flex: 1;
            position: relative;
        }

        .container-bottom {
            padding: 20px;
            padding-top: 0;
        }

        .layui-form {
            padding: 20px;

        }


        .layui-input-block {
            margin-left: 130px;
        }

        /* 设置只读输入框的样式 */
        .layui-input[readonly],
        .layui-textarea[readonly] {
            background-color: #f8f8f8;
            cursor: default;
        }

        .log-container {
            height: 100%;
            position: absolute;
            width: 100%;
            background-color: #1e1e1e;
            color: #d4d4d4;
            font-family: Consolas, Monaco, 'Courier New', monospace;
            overflow-y: auto;
            word-wrap: break-word;
        }

        /* 定义日志行的样式 */
        .log-line {
            padding: 3px 0;
            font-size: 14px;
        }

        /* 定义不同级别日志的颜色 */
        .white {
            color: #d4d4d4;
        }

        .green {
            color: #53ff7f;
        }

        .yellow {
            color: #cca700;
        }

        .red {
            color: #f14c4c;
        }

        .blue {
            color: #37a5ff;
        }

        /* 修改tab项的样式 */
        .layui-tab-item {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .layui-input {
            height: 0.7cm;
        }

        .layui-form-item {
            margin-bottom: 5px;
        }

    </style>
</head>

<body>
<!-- 添加导出格式选择弹窗 -->
<div id="exportFormatDialog" style="display: none;">
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">导出格式</label>
            <div class="layui-input-block">
                <input type="radio" name="exportFormat" value="json" title="JSON" checked>
                <input type="radio" name="exportFormat" value="xlsx" title="Excel (XLSX)">
            </div>
        </div>
    </div>
</div>

<div class="container-top">
    <div class="progress-section">
        <div class="circle-progress">
            <svg width="150" height="150"
                 class="layui-anim">
                <defs>
                    <linearGradient id="progressGradient" gradientTransform="rotate(90)">
                        <stop offset="0%" stop-color="#009688"/>
                        <stop offset="33%" stop-color="#1E9FFF"/>
                        <stop offset="66%" stop-color="#FFB800"/>
                        <stop offset="100%" stop-color="#FF5722"/>
                    </linearGradient>
                </defs>
                <circle cx="75" cy="75" r="65" fill="none" stroke="#e0e0e0" stroke-width="10"/>
                <circle cx="75" cy="75" r="65" fill="none" stroke="url(#progressGradient)" stroke-width="10"
                        stroke-dasharray="408.4" stroke-dashoffset="0"/>
            </svg>
            <div class="number">0</div>
        </div>
        <div class="info-section">
            <h2 class="title" id="task-status">正在采集</h2>
            <div class="stats">
                <span class="stat-item">采集用时：<span id="collection-time">--</span></span>
                <span class="stat-item">平均速度：<span id="average-speed">0条/分钟</span></span>
            </div>
        </div>
    </div>
    <div class="button-group">
        <button class="layui-btn layui-btn-primary layui-border-green" id="export-data-btn">
            导出数据
        </button>
        <button class="layui-btn layui-btn-primary layui-border-green" style="display: none" id="out-btn">退出</button>
        <button class="layui-btn layui-btn-primary layui-border-blue" style="display: none" id="reExec-btn">重新执行
        </button>
        <button class="layui-btn layui-btn-primary layui-border-orange" id="pause-task-btn">暂停任务</button>
        <button class="layui-btn layui-btn-primary layui-border-red" id="end-task-btn">终止任务</button>
    </div>
</div>
<div class="container-bottom">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">任务日志</li>
            <li>任务详情</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div id="logContainer" class="log-container">
                    <div class="log-line log-info">[10:00:01] 开始初始化任务 TASK_001...</div>

                </div>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form" lay-filter="taskDetailForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">任务名</label>
                        <div class="layui-input-block">
                            <input type="text" id="taskName" name="taskName" class="layui-input" readonly
                                   value="示例任务">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">任务定义</label>
                        <div class="layui-input-block">
                                <textarea id="taskDefinition" name="taskDefinition" class="layui-textarea" readonly
                                          style="height: 150px;"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">任务描述</label>
                        <div class="layui-input-block">
                            <textarea id="taskDescription" name="taskDescription" class="layui-textarea" readonly>这是一个网页数据采集任务，用于获取示例网站的标题和内容信息。</textarea>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // 控制动画的函数
    function startRotation() {
        $('svg').addClass('layui-anim-rotate layui-anim-loop')
    }

    function stopRotation() {
        const $svg = $('svg')
        $svg.removeClass('layui-anim-rotate')
        $svg.removeClass('layui-anim-loop')
    }
</script>
<script src="crawler_exec_render.js"></script>
</body>

</html>